<template>
    <div class="cashier-bill" >
        <div class="search-part">
            <div class="part1">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="grid-content">
                            <v-simpsearch class="simple-search" @transferParam="getParam"></v-simpsearch>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="list-main">
            <waterfall :line-gap="300" :watch="items" id="myDIV"
                       :max-line-gap="360"
                       :min-line-gap="220"
                       :fixed-height="true"
                       align="center">
                <!-- each component is wrapped by a waterfall slot -->
                <waterfall-slot
                        v-for="(item, index) in items"
                        :width="265"
                        :height="210"
                        :order="index"
                        :key="item.id"

                >
                    <transition name="el-zoom-in-center" mode="out-in">


                        <v-billcomp
                                :item="item"
                                :classText="getState(item.state)"
                                :index="index"
                                :backSelectItems="selectItems"
                                class="item"
                                :backItems="getCurrentSelectItems"
                                :viewClick="function(){info(item)}"
                                :buttonText="buttonText"
                                :isMutpart="false"
                                :currentRadio="currentRadio"

                        >
                            <h6 class="sn">{{item.sn}}</h6>

                            <ul>
                                <li class="stock-type">
                                  <span >&nbsp;{{convertBtype(item.btype)}}</span>
                                </li>
                                <li>
                                    <span>{{item.oname}}</span>
                                </li>
                                <li>
                                    <span>{{item.biz_bill_sn||"暂无原始单号"}}</span>
                                </li>
                                <li class="bize-date">
                                  <span>
                                    <el-tooltip class="item spec" effect="dark" content="创建时间" placement="left">
                                      <el-button>{{item.ctime}}</el-button>
                                    </el-tooltip>
                                  </span>
                                </li>
                            </ul>

                        </v-billcomp>
                    </transition>

                </waterfall-slot>

            </waterfall>
            <div class="pages">当前第{{currentPage}}页总共{{totalPage}}页</div>
            <div style=" width: 150px; margin: 0 auto;" v-if="allData">没有更多数据了</div>
        </div>
    </div>

</template>

<script>
    import Waterfall from 'vue-waterfall/lib/waterfall.vue';
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
    import vSearch from '../Search.vue';
    import vBillcomp from '../../common/BillComp.vue';
    import vSimpsearch from '../SimpSearch.vue';
    import moment from 'moment';
    import * as type from '../../../store/types';
    export default {
        name: 'keepalive-false',
        data: function () {
            return {
                currentRadio: {index: -1},
                allData: false,
                allItems: [],
                selectItems: [],
                items: [],
                rows: 20,//显示数量
                page: 1,//当前页数
                totalPage: 1,
                loading: true,
                param: '',
                state: '',
                buttonText: '查看',
                currentUser:{},
            }
        },
        computed: {

            currentPage: function () {

                if (this.page < this.totalPage) {

                    return this.page;
                } else {
                    return this.totalPage;
                }
            }
        },
        mounted: function () {
            this.currentUser = JSON.parse(localStorage.getItem("currentUser"));
            this.loadMore();
            this.$$("#content").scrollTop(0)
            let self = this;
            this.$$("#content").on('scroll', function (e) {
                var scrollTop = self.$$("#content").scrollTop();
                var innerHeight = self.$$("#content").innerHeight();
                var scrollHeight = self.$$("#content").scrollHeight();
                if (scrollTop + innerHeight >= scrollHeight) {
                    self.page++;
                    if (self.page > self.totalPage) {
                        return;
                    }
                    self.loading = true;
                    self.loadMore();
                    console.log('*(******************' + self.page)
                }
            })


            document.getElementById("myDIV").addEventListener('wheel', function (e) {
                if (e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0) {
                    console.log(e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0)
                    self.page++;
                    self.loading = true;
                    self.loadMore();
                }
            });
        },
        components: {
            vSearch, vBillcomp, Waterfall, WaterfallSlot,vSimpsearch
        },
        watch: {
            param(val){
                this.items = [];
                this.page = 1;
                this.totalPage = 1;
                this.loading = true;
                this.loadMore();
            },
            state(){
                this.items = [];
                this.page = 1;
                this.totalPage = 1;
                this.loading = true;
                this.loadMore();
            }
        },

        methods: {
            convertBtype:function (typeV) {

                switch (typeV) {
                    case -3:
                        return '调拨出库';
                    case -2:
                        return '销售出库';
                    case -1:
                        return '普通出库';
                    case 1:
                        return '普通入库';
                    case 2:
                        return '采购入库';
                    case 3:
                        return '调拨入库';
                }

            },
            getState: function (state) {
              if (state == 0) {
                  return {
                      'stateClass': 'effect-circle',
                      'stateText': '生效'
                  }
              } else if (state == 1) {
                  return {
                      'stateClass': 'complete-circle',
                      'stateText': '完成'
                  }
              }else {
                  return {
                      'stateClass': 'other-circle',
                      'stateText': '其他'
                  }
              }
            },
            loadMore() {
                let self = this;
                if (this.page <= this.totalPage && this.loading) {
                    this.$axioxs.get("store_bill/get-no-complete-bill?param=" + this.param + "&rows=" + this.rows + "&page=" + this.page + "&states=" + this.state)
                        .then(function (res) {
                                self.totalPage = res.data.totalPage;
                                self.allItems = res.data.records;
                                self.allItems.forEach(item => {
                                    item.ctime = moment(item.ctime).format("YYYY-MM-DD HH:mm");
                                    item.height = 210;
                                    item.width = 300;
                                    self.items.push(item);
                                    self.allData = false;
//                                    if(item.btype == "-2"){
//                                      item.bType = "销售出库";
//                                    }
//                                    else if (item.btype == "2") {
//                                      item.bType = "采购入库";
//                                    }
//                                    else if (item.btype == "-1") {
//                                        alert(2)
//                                      item.bType = "普通出库";
//                                    }
//                                    else if (item.btype == "1") {
//                                      item.bType = "普通入库";
//                                    }
//                                    else if (item.btype == "-３") {
//                                        alert(1)
//                                      item.bType = "调拨出库";
//                                    }
//                                    else if (item.btype == "３") {
//                                      item.bType = "调拨入库";
//                                    }
//                                    else {
//
//                                    }
                                });
                                self.loading = false;
                            },
                            (res) => {

                                this.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            });
                } else {
                    this.allData = true;
                    this.loading = false;
                }
            },
            getCurrentSelectItems: function (items) {
                console.log("==================>")
                console.log(items)
                // alert(JSON.stringify(items.length))
            },
            getParam(res){
                this.param = res;
                this.$$("#content").scrollTop(0)
            },
            info: function (item) {
              let hasRights = this.currentUser.rights.find(obj=> obj === 'review_view')
              if(hasRights != 'review_view'){
                this.$message({
                    showClose: true,
                    message: '权限不足',
                    type: 'warning'
                });
                return;
              }
                console.log(item)
                this.$router.push({
                    name: 'review',
                    path: '/review/info',
                    params: {
                        item: item
                    }
                });
            }

        }
    }
</script>

<style scoped>
    .pages {
        position: fixed;
        bottom: 0;
        text-align: center;
        width: 70%;
        margin: 0 auto;
        /* background: black; */
        z-index: 20;
        height: 20px;
        opacity: 0.5;
        font-size: 9px;
    }

    .item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }

    .list-main {
        padding-top: 80px;
    }

    .spec {
        font-size: 1em;
        border: none;
        left: 0;
        padding: 0;
    }

    .part1 {
        padding-bottom: 5px;
        border-bottom: 1px solid #cacaca;
    }

    .pd10 {
        padding: 10px 0px 0px 20px;
    }

    .l1 {
        text-indent: initial;
        margin-top: -24px;
    }

    .el-button.item {
        position: static;
    }
    #myDIV{
        margin: 0 20px;
    }
</style>
